<template>
	<div class="_layout_base-tabs">
		<el-tabs v-model="store.currentTabVal" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
			<template v-for="(item, key) in store.tabItems" :key="item.name">
				<el-tab-pane :name="item.name" :closable="!!key">
					<template #label>
						<span class="custom-tabs-label">
							<el-icon color="gray" class="mr-1 tab-icon" style="vertical-align: -3px">
								<HelpFilled />
							</el-icon>
							<span>{{ item.label }}</span>
						</span>
					</template>
				</el-tab-pane>
			</template>
		</el-tabs>
	</div>
</template>
<script setup>
	import { ElTabs, ElTabPane, ElIcon } from 'element-plus';
	import { HelpFilled } from '@element-plus/icons-vue';
	import { useRouter } from 'vue-router';
	import { useStore } from '@/store';
	const store = useStore();
	const router = useRouter();

	function tabClick(pane) {
		const { name } = pane.props;
		store.setRouteCleanCache(false);
		router.push({ name });
	}

	function tabRemove(name) {
		store.removeTab(name);
		router.push({ name: store.currentTabVal });
	}
</script>
<style lang="scss">
	$theme: #3eaf7c;

	._layout_base-tabs {
		border-top: 1px solid #f6f6f6;
		padding-top: 10px;

		&>.el-tabs {
			margin: 0 20px;

			&>.el-tabs__header {
				border-bottom: none;

				.el-tabs__nav {
					border: none;

					.el-tabs__item {
						-webkit-mask: url();
						mask: url();
						transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
						-webkit-mask-size: 100% 100%;
						mask-size: 100% 100%;
						margin-right: -18px;
						line-height: 38px;
						margin-top: 1px;
						height: 38px;
						border: 0;

						&.is-active {
							color: $theme;
							background-color: lighten($theme, 46%) !important;

							.tab-icon {
								color: $theme;
							}
						}

						&:hover {
							color: #515a6e !important;
							padding: 0 30px 0 30px;
							background: #dee1e6;
						}
					}
				}
			}
		}
	}
</style>